/**
 * Created by GUO on 2017/5/20.
 * 顶部滚动指示器
 * @flow
 */

import React from 'react';
import {
    ViewPagerAndroid,
    Platform,
    View,
    FlatList,
    StyleSheet,
    PixelRatio,
    Text,
    TouchableOpacity,
} from 'react-native';

type Props = {
    labels: Array<string>,
    index: number,
    onPressItem?: (index: number) => void,
};

type DefaultProps = {
    labels: Array<string>,
    index: number
};

const REF_LIST = 'REF_LIST';

export default class TabPageIndicator extends React.PureComponent<DefaultProps,Props,void>{

    props: Props;

    static defaultProps = {
        index: 0,
        labels: [],
    };

    _width = 0;

    render(){
        return (
           <FlatList
               ref = {REF_LIST}
               getItemLayout = {this._getItemLayout.bind(this)}
               onLayout={this._onLayout.bind(this)}
               showsHorizontalScrollIndicator = {false}
               horizontal = {true}
               bounces = {false}
               data={this.props.labels}
               renderItem = {this._renderItem.bind(this)}
               keyExtractor = {(item,index) => String(index)}
               style={styles.list}/>
        );
    }

    _onLayout({nativeEvent}){
        this._width = nativeEvent.layout.width;
    }

    _getItemLayout(data,index){
        return {length:64,offset:64*index,index};
    }

    componentWillReceiveProps(nextProps:Props){
        if(nextProps.index != this.props.index){
            //fix ios滚到最右边时，会有空白
            if(Platform.OS === 'ios'){
                let {labels} = nextProps;
                let contentWidth = this._getItemLayout(labels,labels.length -1).offset;
                let maxOffsetX = Math.max(0,(contentWidth - this._width));
                let offsetX = this._getItemLayout(labels,nextProps.index).offset - (this._width*0.5);
                if(offsetX <0){
                    offsetX = 0;
                }

                let x = Math.min(maxOffsetX,offsetX);

                this.refs[REF_LIST].scrollToOffset({animated:true, offset: x});
            }else{
                this.refs[REF_LIST].scrollToIndex({animated:true,index:nextProps.index,viewPosition:0.5});
            }
        }
    }

    _renderItem({item,index}){
        let active = (index === this.props.index);

        return (
            <TouchableOpacity
                onPress={()=> this._onPressItem(index)}
                style={active ? styles.itemActive: styles.item}>
                <Text style={active ? styles.itemTextActive: styles.itemText}>{item}</Text>
            </TouchableOpacity>
        );
    }

    _onPressItem(index: number){
        this.props.onPressItem && this.props.onPressItem(index);
    }

}

const styles = StyleSheet.create({
    list:{
        backgroundColor: 'white',
        borderColor: '#eaeaea',
        borderBottomWidth: 1/PixelRatio.get(),
        maxHeight:36,
    },
    item:{
        width:56,
        height:36,
        borderBottomWidth: 2,
        borderColor: 'transparent',
        justifyContent:'center',
        alignItems:'center',
    },
    itemActive: {
        width:56,
        height:36,
        borderBottomWidth: 2,
        borderColor: '#0AA284',
        justifyContent:'center',
        alignItems:'center',
    },
    itemText:{
        fontSize: 14,
        color: 'rgba(0,0,0,0.54)',
    },
    itemTextActive:{
        fontSize: 14,
        color: '#0AA284',
    }
});

